<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside class="home-aside" width="250px">
      <!-- logo -->
      <div class="home-logo-div" v-if="!isOwner">
        <router-link to="/customer/home">
          <el-image
            class="home-logo"
            src="../src/assets/logo_trans.png"
            fit="contain"
          ></el-image
        ></router-link>
      </div>
      <div class="home-logo-div" v-if="isOwner">
        <router-link to="/owner/home">
          <el-image
            class="home-logo"
            src="../src/assets/logo_trans.png"
            fit="contain"
          ></el-image
        ></router-link>
      </div>
      <!-- 折叠icon -->
      <el-icon
        class="toggle-button"
        v-model="isCollapse"
        @click="toggleCollapse"
        size="20px"
      >
        <Fold v-if="!isCollapse" />
        <Expand v-if="isCollapse" />
      </el-icon>
      <!-- 侧边栏菜单 -->
      <el-menu
        class="home-menu-vertical"
        :collapse="isCollapse"
        :default-active="$route.path"
        router
        v-if="!isOwner"
      >
        <el-menu-item index="/customer/food">
          <el-icon><Search /></el-icon>
          <span slot="title">菜品列表</span>
        </el-menu-item>
        <el-menu-item index="/customer/recommend">
          <el-icon><MagicStick /></el-icon>
          <span slot="title">猜你想吃</span>
        </el-menu-item>
        <el-menu-item index="/customer/order">
          <el-icon><Wallet /></el-icon>
          <span slot="title">我的订单</span>
        </el-menu-item>
        <el-menu-item index="/customer/account">
          <el-icon><User /></el-icon>
          <span slot="title">我的账号</span>
        </el-menu-item>
      </el-menu>
      <el-menu
        class="home-menu-vertical"
        :collapse="isCollapse"
        :default-active="$route.path"
        router
        active-text-color="#E3A566"
        v-if="isOwner"
      >
        <el-menu-item index="/owner/food">
          <el-icon><Search /></el-icon>
          <span slot="title">菜品列表</span>
        </el-menu-item>
        <el-menu-item index="/owner/recommend">
          <el-icon><MagicStick /></el-icon>
          <span slot="title">猜你想吃</span>
        </el-menu-item>
        <el-menu-item index="/owner/order">
          <el-icon><Wallet /></el-icon>
          <span slot="title">我的订单</span>
        </el-menu-item>
        <el-menu-item index="/owner/account">
          <el-icon><User /></el-icon>
          <span slot="title">我的账号</span>
        </el-menu-item>
      </el-menu>
      <el-image src="../src/assets/plate.png" class="plate-div"></el-image>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header class="fooddetail-header" height="40px">
        <div class="ball"></div>
        <div class="food-line"></div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/customer/home' }" v-if="!isOwner">
            主页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/customer/order' }" v-if="!isOwner"
            >订单列表</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/owner/home' }" v-if="isOwner">
            主页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/owner/order' }" v-if="isOwner"
            >订单列表</el-breadcrumb-item
          >
          <el-breadcrumb-item>订单详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>

      <!-- 主体 -->
      <el-main class="home-main">
        <el-scrollbar height="590px">
          <!-- 订单卡片 -->
          <el-card :body-style="{ padding: '0px' }" class="orderdetail-card">
            <el-button class="flavor-card-2-return" type="warning" text @click="gotoOrder"
              ><el-icon size="30px"><Back /></el-icon>
            </el-button>
            <div class="orderdetail-info">
              <el-divider content-position="left">基本信息</el-divider>
              <el-descriptions :column="2" class="orderdetail-des">
                <el-descriptions-item label="下单时间">{{
                  orderDtoEntity.orderTime
                }}</el-descriptions-item>
                <el-descriptions-item
                  label="接单时间"
                  v-if="
                    orderDtoEntity.orderRectime !== null &&
                    orderDtoEntity.hasRejected === false
                  "
                  >{{ orderDtoEntity.orderRectime }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="拒单时间"
                  v-if="
                    orderDtoEntity.orderRectime !== null &&
                    orderDtoEntity.hasRejected === true
                  "
                  >{{ orderDtoEntity.orderRectime }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="完成时间"
                  v-if="orderDtoEntity.orderFinishTime !== null"
                  >{{ orderDtoEntity.orderFinishTime }}</el-descriptions-item
                >
                <el-descriptions-item label="收货地址">{{
                  orderDtoEntity.addressName
                }}</el-descriptions-item>
                <el-descriptions-item
                  label="收货人"
                  v-if="orderDtoEntity.addressName !== '堂食'"
                  >{{ orderDtoEntity.recipientName }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="电话号码"
                  v-if="orderDtoEntity.addressName !== '堂食'"
                  >{{ orderDtoEntity.phoneNumber }}</el-descriptions-item
                >
              </el-descriptions>
              <el-divider content-position="left">菜品信息</el-divider>
              <!-- 菜品列表 -->
              <el-row :gutter="30">
                <el-col
                  v-for="foodEntity in orderDtoEntity.foodJudgementList"
                  :key="foodEntity.foodName"
                  :span="24"
                >
                  <!-- 左侧图像 -->
                  <el-image class="order-image" :src="foodEntity.photo" fit="cover">
                  </el-image>
                  <!-- 右侧信息 -->
                  <div class="checkout-food-title">
                    <span>{{ foodEntity.foodName }}</span
                    ><br />
                    <span>×&nbsp{{ foodEntity.foodNumber }}&nbsp</span>
                  </div>
                  <div class="checkout-food-price">
                    <span>￥ {{ foodEntity.foodPrice }}</span>
                  </div>
                </el-col>
              </el-row>
              <div style="margin-bottom: 20px">总价：￥ {{ orderDtoEntity.price }}</div>
              <!-- 如果订单已完成，显示 -->
              <div v-if="isFinished">
                <el-divider content-position="left">我的评价</el-divider>
                <!-- 如果订单被评论，显示 -->
                <div v-if="isCommented">
                  <!-- 菜品打分列表 -->
                  <el-row :gutter="30">
                    <el-col
                      v-for="foodEntity in orderDtoEntity.foodJudgementList"
                      :key="foodEntity.foodName"
                      :span="12"
                      style="margin-bottom: 5px"
                    >
                      <!-- 菜品图片 -->
                      <el-image
                        class="orderdetail-comment-food-image"
                        :src="foodEntity.photo"
                        fit="cover"
                      >
                      </el-image>
                      <el-row>
                        <el-col :span="12" style="text-align: left"
                          ><span>{{ foodEntity.foodName }}</span></el-col
                        >
                        <!-- 菜品打分 -->
                        <el-col :span="8">
                          <el-rate v-model="foodEntity.foodscore" disabled /></el-col
                      ></el-row>
                      <!-- 菜品评价 -->
                      <el-row>
                        <el-col :span="24" style="text-align: left">
                          <span style="color: grey">{{
                            foodEntity.comment
                          }}</span></el-col
                        ></el-row
                      >
                    </el-col>
                  </el-row>
                  <el-descriptions :column="2" class="orderdetail-des">
                    <el-descriptions-item label="口味"
                      ><el-rate
                        v-model="orderDtoEntity.tasteScore"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value} 分"
                    /></el-descriptions-item>
                    <el-descriptions-item label="服务"
                      ><el-rate
                        v-model="orderDtoEntity.serviceScore"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value} 分"
                    /></el-descriptions-item>

                    <el-descriptions-item label="环境"
                      ><el-rate
                        v-model="orderDtoEntity.environmentScore"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value} 分"
                    /></el-descriptions-item>
                  </el-descriptions>
                  <br />
                  <el-descriptions :column="1">
                    <el-descriptions-item label="评论">{{
                      orderDtoEntity.comment
                    }}</el-descriptions-item>
                  </el-descriptions>
                  <!-- 评论的图片 -->
                  <el-row
                    ><el-col v-for="photoSrc in photoList" :key="photoSrc" :span="6">
                      <el-image
                        class="orderdetail-comment-image"
                        :src="photoSrc"
                        fit="cover"
                        :preview-src-list="photoList"
                      >
                      </el-image></el-col
                  ></el-row>
                  <!-- 评论的时间 -->
                  <div class="orderdetail-comment-time">
                    {{ orderDtoEntity.commentTime }}
                  </div>
                </div>
                <!-- 如果订单未评论，显示 -->
                <div v-if="!isCommented && isOwner">
                  <span>顾客暂未评论</span>
                  <br />
                  <br />
                </div>
                <div v-if="!isCommented && !isOwner">
                  <el-form
                    :model="commentForm"
                    :rules="commentRules"
                    ref="commentRuleForm"
                  >
                    <!-- 菜品打分列表 -->
                    <el-row :gutter="30">
                      <el-col
                        v-for="foodEntity in orderDtoEntity.foodJudgementList"
                        :key="foodEntity.foodName"
                        :span="24"
                      >
                        <!-- 菜品图片 -->
                        <el-image
                          class="orderdetail-image"
                          :src="foodEntity.photo"
                          fit="cover"
                        >
                        </el-image>
                        <el-row>
                          <el-col :span="12" style="text-align: left"
                            ><span>{{ foodEntity.foodName }}</span></el-col
                          >
                          <!-- 菜品打分 -->
                          <el-col :span="8">
                            <el-form-item prop="score">
                              <el-rate
                                v-model="foodEntity.foodscore"
                                text-color="#ff9900"
                              /> </el-form-item></el-col
                        ></el-row>
                        <!-- 菜品评价 -->
                        <el-row>
                          <el-col :span="12">
                            <el-form-item>
                              <!-- 输入框 -->
                              <el-input
                                v-model="foodEntity.comment"
                                input-width="50px"
                              ></el-input> </el-form-item></el-col
                        ></el-row>
                      </el-col>
                    </el-row>
                    <!-- 订单打分列表 -->
                    <div class="orderdetail-order-comment">
                      <el-form-item label="口味" prop="tasteScore">
                        <el-rate
                          v-model="orderDtoEntity.tasteScore"
                          show-score
                          text-color="#ff9900"
                          score-template="{value} 分"
                      /></el-form-item>
                      <el-form-item label="服务" prop="serviceScore">
                        <el-rate
                          v-model="orderDtoEntity.serviceScore"
                          show-score
                          text-color="#ff9900"
                          score-template="{value} 分"
                      /></el-form-item>
                      <el-form-item label="环境" prop="environmentScore">
                        <el-rate
                          v-model="orderDtoEntity.environmentScore"
                          show-score
                          text-color="#ff9900"
                          score-template="{value} 分"
                      /></el-form-item>
                    </div>
                    <div class="orderdetail-comment-div">
                      <el-form-item label="评&nbsp论" prop="comment">
                        <!-- 评论输入框 -->
                        <el-input v-model="commentForm.comment" type="textarea" />
                      </el-form-item>
                    </div>
                    <el-upload
                      v-model:file-list="fileList"
                      action="http://localhost:8080/photo/upload/order"
                      list-type="picture-card"
                      :on-success="handleAvatarSuccess"
                    >
                      <el-icon><Plus /></el-icon>
                    </el-upload>
                    <el-button
                      class="orderdetail-comment-button"
                      round
                      color="#E3A566"
                      @click="comment"
                      >发布</el-button
                    >
                  </el-form>
                </div>
              </div>
            </div>
          </el-card>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { ElMessageBox } from "element-plus";

export default {
  data() {
    return {
      isCollapse: false, //是否折叠侧边栏
      orderDtoEntity: {},
      foodList: [],
      photoList: [],
      account: {},
      isFinished: false,
      isCommented: false,
      commentForm: [],
      lastpage: "",
      commentRules: {
        comment: [
          {
            required: true,
            message: "请输入评论",
            trigger: "blur",
          },
        ],
      },
      isOwner: false,
    };
  },
  created() {
    console.log(history.state.orderID);
    this.account = JSON.parse(this.$store.state.account);
    this.isOwner = this.account.role === 'owner' ? true : false;
    let url = "/orders/detail/" + history.state.orderID + "/" + this.account.id;
    let _this = this;
    _this.lastpage = history.state.lastpage;
    this.$http.get(url).then(function (response) {
      _this.orderDtoEntity = response.data;
      //设置地址，堂食的地址也可以这样获取
      _this.orderDtoEntity.addressName = _this.orderDtoEntity.address.address;
      _this.orderDtoEntity.recipientName = _this.orderDtoEntity.address.recipientName;
      _this.orderDtoEntity.phoneNumber = _this.orderDtoEntity.address.phoneNumber;
      //设置订单的用户id
      _this.orderDtoEntity.userID = _this.orderDtoEntity.user.id;
      console.log(_this.orderDtoEntity);
      //获取食品信息，包括修改图像url和设置
      _this.foodList = response.data.foodJudgementList;
      let len1 = _this.foodList.length;
      for (let i = 0; i < len1; i++) {
        _this.foodList[i].photo = "http://localhost:8080" + _this.foodList[i].food.photo;
        _this.foodList[i].foodName = _this.foodList[i].food.foodName;
        _this.foodList[i].foodPrice =
          (_this.foodList[i].food.price * 10 * _this.foodList[i].foodNumber) / 10;
        _this.foodList[i].foodID = _this.foodList[i].food.id;
      }
      if (response.data.photo != null) {
        //获取订单的照片
        _this.photoList = response.data.photo.split(",");
        let len = _this.photoList.length;
        for (let i = 0; i < len; i++) {
          _this.photoList[i] = "http://localhost:8080" + _this.photoList[i];
        }
      }
      // 判断订单是否已完成
      if (_this.orderDtoEntity.orderFinishTime === null) {
        // 未完成
        return;
      }
      // 订单已完成
      _this.isFinished = true;
      // 判断订单是否被评论
      if (_this.orderDtoEntity.commentTime !== null) {
        // 订单已被评论
        _this.isCommented = true;
        console.log("订单已被评论");
      } else {
        // // 订单未被评论
        // _this.orderDtoEntity = null; // 不显示默认照片
      }
    });
  },
  methods: {
    // 切换侧边栏的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    gotoOrder() {
      //返回到上个页面，可能是主页/订单列表
      let _this = this;
      _this.$router.push({
        path: this.lastpage,
      });
    },
    calculateTotalPrice(foodEntity) {
      return (foodEntity.foodPrice * 10 * foodEntity.foodNumber) / 10; // 计算总价
    },
    calculateOrderPrice() {
      let _this = this;
      let totalPrice = 0;
      console.log("foodList = ", _this.foodList);
      for (let i = 0; i < _this.foodList.length; i++) {
        totalPrice += _this.foodList[i].foodPrice * _this.foodList[i].foodNumber;
      }
      return totalPrice;
    },
    // 用户发布评论
    comment() {
      let _this = this;
      _this.$refs["commentRuleForm"].validate((valid) => {
        //如果数据格式不符合要求,直接返回
        if (!valid) {
          _this.$message({
            message: "请按要求输入评论！",
            type: "error",
          });
          return;
        }
        _this.orderDtoEntity.comment = _this.commentForm.comment;
        _this.orderDtoEntity.commentTime = new Date().valueOf();
        console.log("修改的订单信息为:", this.orderDtoEntity);

        this.$http.put("/orders", this.orderDtoEntity).then(function (response) {
          _this.$message({
            message: "评价成功！",
            type: "success",
          });
          _this.isCommented = true;
        });
        //转换时间的格式
        _this.orderDtoEntity.commentTime = _this.getData(
          _this.orderDtoEntity.commentTime
        );
        if (_this.orderDtoEntity.photo != null) {
          //获取订单的照片
          _this.photoList = _this.orderDtoEntity.photo.split(",");
          let len = _this.photoList.length;
          for (let i = 0; i < len; i++) {
            _this.photoList[i] = "http://localhost:8080" + _this.photoList[i];
          }
        }
        _this.isCommented = true;
      });
    },
    getData(n) {
      let now = new Date(n),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return (
        y +
        "-" +
        (m < 10 ? "0" + m : m) +
        "-" +
        (d < 10 ? "0" + d : d) +
        " " +
        now.toTimeString().substr(0, 8)
      );
    },
    //新增照片
    handleAvatarSuccess(response, uploadFile) {
      if (this.orderDtoEntity.photo == "" || this.orderDtoEntity.photo == null) {
        this.orderDtoEntity.photo = response;
      } else {
        this.orderDtoEntity.photo += "," + response;
      }
    },
  },
};
</script>

<style>
.orderdetail-card {
  width: 1000px;
  margin: 0 auto;
}
.orderdetail-info {
  /* width: 900px; */
  padding: 20px 50px 0px;
}
/* 描述列表标签的宽度 */
.orderdetail-des .el-descriptions__label {
  width: 80px;
  display: inline-block;
}
.orderdetail-des .el-descriptions__cell {
  width: 300px;
}
.orderdetail-comment-time {
  color: grey;
  float: right;
  margin: 0px 50px 20px;
}
.orderdetail-comment-image {
  width: 150px;
  height: 150px;
  float: left;
  margin: 10px 50px;
  box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.3);
}
.orderdetail-image {
  float: left;
  width: 90px;
  height: 80px;
  margin: 0px 20px 0px 150px;
}
.orderdetail-comment-food-image {
  float: left;
  width: 90px;
  height: 80px;
  margin-right: 20px;
}
.orderdetail-order-comment {
  width: 250px;
  margin: 0 auto;
}
.orderdetail-card .el-textarea__inner {
  width: 400px !important;
}
.orderdetail-comment-div {
  width: 400px;
  margin: 0 auto;
}
.orderdetail-comment-button {
  margin: 10px;
  color: white !important;
  font-size: 18px !important;
  font-family: sanji;
}
</style>
